<template>
	<view class="">
		<view class="serve_item" @click="toDetail">
			<view class="serve_l" @click="showBigImg(goodsItem.preview_img)">	
				<image class="fangda" src="https://img-cdn.duobashuzi.com/xianggui/img/fangda.png" mode="widthFix"></image>
				<image :src="goodsItem.preview_img" mode="widthFix"></image>
			</view>
			<view class="serve_r">
				<view class="sr_t">
					<view class="sr_title">

					</view>
				</view>
				<view class="sr_b">
					<view class="cred">

						<text  v-if="local_shop_price == ''" class="money_now">￥{{goodsItem.local_shop_price}}</text>
						<text  v-else class="money_now">￥{{local_shop_price}}</text>
						<text v-if="memberLevel > 0" class="hyj">会员价</text>
						<text v-if="market_price == ''" class="huiti huaxian">价格￥{{goodsItem.market_price}}</text>
						<text v-else class="huiti huaxian">价格￥{{market_price}}</text>
						
						<!-- <text v-else class="money_now">￥{{goodsItem.spec_item[0].dimensions}}</text> -->
						<text class="huiti">剩余{{goodsItem.local_stock_num}}件</text>
						<block v-if="goodsItem.is_spec == 1">
							<text class="huiti" v-if="specsText == ''">请选择 {{goodsItem.spec_name}}</text>
							<text class="huiti" v-else>{{specsText}}</text>
						</block>
					</view>

				</view>
			</view>
		</view>
		<view class="specsCont">
			<view class="specs" v-if="goodsItem.is_spec == 1" v-for="(items,index) in goodsSpec">
				<view class="specsTitle">{{index}}</view>
				<view class="specsul">
					<!-- onspecsulli -->
					
					<view 
					:class="['specsulli',{'onspecsulli':v.selected }]" 
					v-for="(v,i) in items" 
					@click="specsTab(v,index)">{{v.item}}</view>
					<!-- <view class="specsulli">100片/瓶</view> -->
				</view>
			</view>
		</view>
		
		<view class="buy_num" v-if="isCart != 3">
			<view class="" style="font-size: 14px;">
				购买数量
			</view>
			<u-number-box :disabledInput="true" v-model="number"
				@change="changeNum"></u-number-box>
			
		</view>
	</view>

</template>
<script>
	import {getGoodsSpecPrice} from "@/api/index.js"
	export default {
		name: "serveAdd",
		props: {
			goodsItem: {
				type: Object
			},
			goodsSpec:{
				type: Object
			},
			isOrder: {
				type: Boolean,
				default: false
			},
			number:{
				type:Number,
			},
			isDetail: {
				type: Boolean,
				default: false
			},
			isCart:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				specsIndex: -1,
				num:1,
				specsText:'',
				memberLevel:'',
				local_shop_price:'',//会员价
				market_price:'' ,//价格
				selectedOptions: {},
			}
		},
		onShow() {
			this.memberLevel = uni.getStorageSync('memberLevel');
		},
		methods: {
			
			specsTab(item,type){
				
				// 获取当前类别的选项列表
				  const targetList = this.goodsSpec[type];
				  
				  // 取消其他选项的选中状态
				  targetList.forEach(i => {
					if (i !== item) {
					  i.selected = false;
					}
				  });
				  console.log(this.goodsSpec[type])
				  // 切换当前选项的选中状态
				  item.selected = !item.selected;
				 this.$emit("update:goodsSpec", this.goodsSpec)
					const data = this.goodsSpec;
					const item_ids = [];
					Object.keys(data).forEach(key => {
					  data[key].forEach(item => {
						if(item.selected == true){
							item_ids.push(item.item_id)
						}
					  });
					})
				console.log(item_ids.join('_'))	
				getGoodsSpecPrice({item_ids:item_ids.join('_'),productId:this.goodsItem.id}).then(res=>{
					console.log(res)
					
					if(res.code == 200){
						
						this.local_shop_price = res.result.price_list.local_shop_price;
						this.market_price =  res.result.price_list.market_price;
						this.specsText = res.result.sku_name;
						this.goodsItem.minimum_order_quantity = this.num;
						this.$emit("update:goodsItem", this.goodsItem)
						this.$emit('specId',{item_id:res.result.sku_id,itemTex: res.result.sku_name,price_list:res.result.price_list})
					}
				}).catch(err=>{
					this.local_shop_price = this.goodsItem.local_shop_price;
					this.market_price =  this.goodsItem.market_price;
					this.specsText = '';
					this.goodsItem.minimum_order_quantity = this.num;
					// this.$emit("update:goodsItem", this.goodsItem)
					// this.$emit('specId',{item_id: '',itemTex: this.goodsItem.spec_name,price_list::res.result.price_list})
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				})
			},
			showBigImg(img) {
				
				let arr=[];
				 arr.push(img)
				uni.previewImage({
					current: 0,
					urls: arr 
				});
			},
			toDetail() {

			},
			changeNum(e) {
				console.log(e)
				this.num = e.value;
				this.goodsItem.minimum_order_quantity = this.num
				this.$emit("update:goodsItem", this.goodsItem)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$myfont-color: #292929;

	.cred {

		color: #fc0000;

		text {
			display: block;
		}
		.huiti{
			padding-left: 10rpx;
			color: #999;
			font-size: 12px;
		}
	}

	@mixin ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.serve_item {
		display: flex;
		border-radius: 10px;
		background-color: #fff;
		padding: 24rpx;
		margin-bottom: 12px;

		.serve_l {
			width: 100px;
			height: 100px;
			overflow: hidden;
			border-radius: 5px;
			position: relative;
			.fangda{
				width: 32rpx;
				height: 32rpx;
				background: #00000061;
				position: absolute;
				right: 0;
				top: 0;
			}
			image {
				height: 100%;
				width: 100%;
			}
		}

		.serve_r {
			padding-left: 10px;
			flex: 1;
			max-width: 235px;

			.sr_t {
				display: flex;
				align-items: center;

				.sr_title {
					min-height: 20rpx;
					font-weight: 700;
					font-size: 16px;
					color: $myfont-color;
					flex: 1;
				}

			}

			.sr_m {
				display: flex;
				margin-top: 12px;
				font-size: 12px;
				color: #666;
				align-items: center;

				.sr_xl {
					font-size: 10px;
					color: #999;
					margin-left: 12px;

					.xl_num {
						color: #e2ab09;
					}
				}

				.apm {
					width: 85px;
					height: 30px;
					border-radius: 15px;
					background: #FF5C2B;
					color: #fff;
					text-align: center;
					line-height: 30px;
				}

				.clock {
					// margin-left: 12px;
				}
			}

			.sr_b {
				margin-top: 8px;
				display: flex;
				align-items: center;

				.goods-num {
					font-size: 12px;
					color: #999;
					margin-left: 12px;
				}

				.money_now {
					font-size: 18px;
					font-weight: 700;
				}

				.money_ago {
					font-size: 10px;
					text-decoration: line-through;
					color: #999;
					margin-left: 4px;
					margin-right: 8px;
				}

			}
		}
	}
	.specsCont{
		border-bottom: 1px solid #f5f5f5;
	}
	.specs{
		.specsTitle{
			font-size: 14px;
			color: #333333;
		}
		.specsul{
			display: flex;
			
			.specsulli{
				padding: 10rpx 20rpx;
				background: #f7f8fa;
				border-radius: 10rpx;
				font-size: 12px;
				color: #333333;	
				margin: 16rpx 0;
				margin-right: 20rpx;
				
			}
			.onspecsulli{
				background: #fff2f2;
				color: #cf0000;
			}
		}
	}
	
	
	.buy_num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.minus {
			width: 25px;
			height: 25px;
			border-width: 1px;
			border-color: #FF5C2B;
			border-style: solid;
			border-top-left-radius: 100px;
			border-top-right-radius: 100px;
			border-bottom-left-radius: 100px;
			border-bottom-right-radius: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.input {
			padding: 0 10px;
		}

		.plus {
			width: 25px;
			height: 25px;
			background-color: #FF5C2B;
			border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			border: 1px solid #FF5C2B;
		}
	}
</style>